{% extends "PopshouseAdminBundle::layout.html.twig" %}

{% block title %}
Nieuws & Promotionele berichten - sorteren
{% endblock %}
{% block content %}

<div class="left side">
    {% include "PopshouseAdminBundle:Link:menu.html.twig"  %}
</div>
<div class="left content" style="width:670px">

<h2>Nieuws sorteren</h2>



<img src="{{ asset('images/layout/loader.gif') }}" id="loader" style="display:none;" />

<div class="flash-notice" style="display:none;"></div>

<div id="tabs">
        <ul>
            <li><a href="#tabs-nl">Nederlands</a></li>
            <li><a href="#tabs-fr">Frans</a></li>
            <li><a href="#tabs-en">Engels</a></li>
            <li><a href="#tabs-de">Duits</a></li>
        </ul>
        
        {% for lang, group in links %}
        <div id="tabs-{{ lang }}">
			<ol id="sortable-{{ lang }}" data-lang="{{ lang }}">
			   {% for link in group %}
			    <li id="link_{{link.id}}" style="background-color: #e4edf5; margin-bottom:5px;">
			       <span class="ui-icon ui-icon-arrowthick-2-n-s" style="float:left;"></span>
			       <img class="bg" src="{{ asset('images/photo/links/' ~ link.id ~ '.jpg') }}" />
			      {{ link.title }}
			    </li>
			    {% endfor %}
			</ol>

			<form id="sort-{{ lang }}" name="sort" enctype="application/x-www-form-urlencoded" method="post" action="#">
			    <dl>
			        <dt id="order-label">&nbsp;</dt>
			        <dd id="order-element">
			            <input type="hidden" name="order" value="" id="order-{{ lang }}" />
			            <input type="hidden" name="lang" value="{{ lang }}" />
			        </dd>
			        <dt id="submit-label">&nbsp;</dt>
			        <dd id="submit-element">
			            <input type="submit" name="submit" id="submit-{{ lang }}" value="Opslaan" disabled="1" />
			        </dd>
			    </dl>
			</form>
			</div>
			 {% endfor %}
</div>
</div>
{% endblock %}
{% block js %}

        $("#sortable-nl, #sortable-fr, #sortable-de, #sortable-en").sortable({
            change: function(){
             lang = $(this).data("lang");
            $("#submit-"+lang).removeAttr("disabled");$(".flash-notice").fadeOut("normal");
            },
            stop: function(){
                lang = $(this).data("lang");
                $("#order-"+lang).val($(this).sortable('serialize'));
            }
        }).disableSelection();
        
        $("#tabs").tabs();
        
  
        
        var options = { 
            target:     '.success',
            dataType: 'json',
            format: 'json',
            beforeSubmit : function(){ $(".flash-notice").hide(); $("#loader").show(); },
            success:    function(data, textStatus) { 
                $("#loader").hide();
                $("#submit-"+data["lang"]).attr("disabled","1");
                $(".flash-notice").html(data["message"]);
                $(".flash-notice").fadeIn("slow");
            },
            error:    function(data, textStatus) { 
                $("#loader").css("visibility","hidden");
                alert("Fout tijdens het opslaan");
                $.debug.print_r(data, "debug"); 
            } 
        }; 
        $('#sort-nl, #sort-fr, #sort-de, #sort-en').ajaxForm(options);
{% endblock %}